<template>
  <div>
    <a-drawer
      title="测试"
      placement="right"
      :destroyOnClose="true"
      :width="600"
      :visible="testVisible"
      @close="onClose"
    >
      <div>当前的flowData:</div>
      <eip-code :value.sync="flowData" language="json"></eip-code>
      <div style="margin-top: 12px">暂存:</div>
      <a-textarea
        :autoSize="{ minRows: 10, maxRows: 100 }"
        :value="flowDataJson"
        @change="editFlowDataJson"
      />

      <a-divider />
      <a-button @click="tempSave" :style="{ marginRight: '8px' }"
        >暂存</a-button
      >
      <a-button @click="onLoad" type="primary">加载(暂存中的json数据)</a-button>
    </a-drawer>
  </div>
</template>

<script>
import { flowStatus } from "../config/flow.js";

export default {
  components: {},
  props: {
    flowConfig: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      testVisible: false,
      flowData: null,
      flowDataJson: "",
    };
  },
  methods: {
    onClose() {
      this.testVisible = false;
    },
    // 编辑框
    editFlowDataJson(e) {
      this.flowDataJson = e.target.value;
    },
    // 暂存
    tempSave() {
      let tempObj = Object.assign({}, this.flowData);
      tempObj.status = flowStatus.SAVE;
      this.flowDataJson = JSON.stringify(tempObj);
    },
    // 加载(暂存中的json数据)
    onLoad() {
      this.$emit("loadFlow", this.flowDataJson);
      this.onClose();
    },
  },
};
</script>
